<?php require_once('conexion.php'); ?>
<html lang="es">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf8_swedish_ci " />
	<title>Detalle</title>
	<link rel="stylesheet" type="text/css" href="./css/estilos.css">
	<script type="text/javascript"  href="./js/scripts.js"></script>
	<script type="text/javascript" src="tjpzoom.js"></script>
<script type="text/javascript" src="tjpzoom_config_default.js"></script>





  <style>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
</style>

  <link rel='stylesheet' href='http://codepen.io/assets/libs/fullpage/jquery-ui.css'>

    <style>
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #F2EEE9;
    font: normal 13px/1.5 Georgia, Serif;
    color: #333;
}
.wrapper {
    width: 705px;
    margin: 20px auto;
    padding: 20px;
}
h1 {
    display: inline-block;
    font-size: 20px;
    font-weight: normal;
    text-transform: uppercase;
    padding: 4px 20px;
    float: left;
}
.clear {
    clear: both;
}
.items {
    display: block;
    margin: 20px 0;
}
.item {
   
    float: left;
    margin: 0 10px 10px 0;
    width: 205px;
    padding: 10px;
    height: 290px;
}
.item img {
    display: block;
    margin: auto;
}
h2 {
    font-size: 16px;
    display: block;
    border-bottom: 1px solid #ccc;
    margin: 0 0 10px 0;
    padding: 0 0 5px 0;
}
button {
    border: 1px solid #722A1B;
    padding: 4px 14px;
    background-color: #fff;
    color: #722A1B;
    text-transform: uppercase;
    float: right;
    margin: 5px 0;
    font-weight: bold;
    cursor: pointer;
}
span {
    float: right;
}
.shopping-cart {
    display: inline-block;
    background: url('http://cdn1.iconfinder.com/data/icons/jigsoar-icons/24/_cart.png') no-repeat 0 0;
    width: 24px;
    height: 24px;
    margin: 0 10px 0 0;
}
</style>

  <script src="js3/prefixfree.min.js"></script>








</head>
<body>
<div id="header_wrapper">

	<div id="header">
    
   		<div id="titulo_sitio">
            <h1><a href="index.html" target="_parent">
            	
               
            </a></h1>
        </div>
        
         <div id="menu">
            <ul>
                <li><a href="index1.php" >Home</a></li>
                <li><a href="servicios1.php" >Servicios</a></li>
				<li><a href="programa1.php">Programa</a></li>
                <li><a href="testevaluacion1.php">Test</a></li>
                <li><a href="somos1.php">Somos</a></li>
                <li><a href="contacto1.php">Registrarse</a></li>
                <li><a href="ubicacion1.php">Ubicaci&oacute;n</a></li>
				
            </ul>    	
        </div> <!-- fin de menu -->
   
        <div id="caja_busqueda">
                <form action="#" method="get">
                  <div align="right"><a href="index.php"><img src="imagenes/cerrar_sesion.png" width="175" height="61"></a></div>
          </form>
                
      </div>
    
    	<div class="cleaner"></div>
    </div> <!-- fin de encabezado -->
	   

	<div id="templatemo_content_wrapper">
	  
	<?php
		include 'conexion.php';
		$re=mysql_query("select * from productos where id=".$_GET['id'])or die(mysql_error());
		while ($f=mysql_fetch_array($re)) {
		?>

	<div class="wrapper">
     
 <a href="./carritodecompras.php?id=<?php  echo $f['id'];?>"><span><i class="shopping-cart"></i></span></a>

    <div class="clear"></div>
    <!-- items -->
    <div class="items">
        <!-- single item -->
        <div class="item">		
                <img src="./productos/<?php echo $f['imagen'];?>" width="270" height="253" onmouseover="TJPzoom(this);"><br>
				<h1><span><?php echo $f['nombre'];?></span></h1>
				<h3><span><?php echo $f['detalle'];?></span></h3>
				<h2><span>Precio: $<?php echo $f['precio'];?></span></h2>				
				
				
				<button class="add-to-cart" type="button">A&ntilde;adir al Carrito de Compras</button>
		</div>
	</div>
    <!--/ items -->
</div>
<!--/ wrapper -->
  <script src='http://codepen.io/assets/libs/fullpage/jquery_and_jqueryui.js'></script>
  <script type="text/javascript" src="js3/index.js"></script>
		
	<?php
		}
	?>

	</div>


</body>
</html>